import React from 'react';
import { Form, Input, Row, Col, InputNumber } from 'antd';

import { UploadOssCompact } from '@/containers';
import { formatToThreePart } from '@/utils/utils';
import { SalaryYearInput, SalaryMonthInput } from '@/pages/Recruitment/components/SalaryInput';

import { InlineInputWrap } from '../../components';

const { TextArea } = Input;

export default function Salary({ form, talentInfo, renderItem, isEdit, oneLineLayout, isSecond }) {
    const { getFieldDecorator } = form;

    const getCurrentYearSalary = () => {
        // 仅为显示placeholder
        const currentYearSalary =
            form.getFieldValue('recruitTalentBackgroundSalary.currentMonthSalary') *
            form.getFieldValue('recruitTalentBackgroundSalary.monthCount');

        if (Number.isNaN(currentYearSalary)) return null;
        return parseInt(currentYearSalary, 10);
    };

    const getCurrentExpectMonthSalary = () => {
        const currentExpectMonthSalary =
            form.getFieldValue('recruitTalentBackgroundSalary.expectSalary') /
            form.getFieldValue('recruitTalentBackgroundSalary.expectMonthNumber');

        if (Number.isNaN(currentExpectMonthSalary)) return null;
        return parseInt(currentExpectMonthSalary, 10);
    };

    React.useEffect(() => {
        const existFileList = talentInfo?.recruitTalentBackgroundSalary?.salaryProveRelations;
        if (existFileList) {
            form.setFieldsValue({
                'recruitTalentBackgroundSalary.salaryProveRelationsFileList': existFileList
            });
        }
    }, [talentInfo]);

    return (
        <Row>
            <Col span={24}>
                <Form.Item label="原月薪" {...oneLineLayout} required={isEdit}>
                    {renderItem(
                        <InlineInputWrap>
                            <Form.Item style={{ flex: 1 }}>
                                {getFieldDecorator('recruitTalentBackgroundSalary.currentMonthSalary', {
                                    initialValue: talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary,
                                    placeholder: '请输入原月薪',
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入原月薪'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        style={{ width: '100%' }}
                                        formatter={val => SalaryMonthInput(val, true)}
                                        parser={val => SalaryMonthInput(val)}
                                        min={0}
                                    />
                                )}
                            </Form.Item>
                            <span style={{ padding: '0 14px' }}>X</span>
                            <Form.Item>
                                {getFieldDecorator('recruitTalentBackgroundSalary.monthCount', {
                                    initialValue: talentInfo?.recruitTalentBackgroundSalary?.monthCount,
                                    rules: [
                                        {
                                            required: true,
                                            message: '月份不能为空'
                                        }
                                    ]
                                })(<InputNumber style={{ width: 140 }} min={12} />)}
                            </Form.Item>
                            <span style={{ paddingLeft: 14 }}>月</span>
                        </InlineInputWrap>,
                        <>
                            {formatToThreePart(talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary) ?? ''}
                            <span style={{ padding: '0 7px' }}>X</span>
                            {talentInfo?.recruitTalentBackgroundSalary?.monthCount ?? ''}月
                        </>,
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item label="原年薪">
                    {renderItem(
                        getFieldDecorator('recruitTalentBackgroundSalary.yearSalary', {
                            initialValue: getCurrentYearSalary()
                        })(
                            <InputNumber
                                // formatter={formatToThreePart}
                                formatter={val => SalaryYearInput(val, true)}
                                parser={val => SalaryYearInput(val)}
                                disabled
                                placeholder="自动生成"
                                style={{ width: '100%' }}
                            />
                        ),
                        formatToThreePart(
                            talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary *
                                talentInfo?.recruitTalentBackgroundSalary?.monthCount
                        ) || '',
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item label="薪资说明" {...oneLineLayout}>
                    {renderItem(
                        getFieldDecorator('recruitTalentBackgroundSalary.currentSalaryDesc', {
                            initialValue: talentInfo?.recruitTalentBackgroundSalary?.currentSalaryDesc,
                            rules: [{ max: 500, message: '薪资说明不能超过500个字符' }]
                        })(<TextArea placeholder="请输入薪资说明" style={{ height: 100 }} />),
                        talentInfo?.recruitTalentBackgroundSalary?.currentSalaryDesc,
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item
                    label="薪资证明"
                    extra={isEdit ? '支持 pdf、doc、docx、jpg、jpeg、rar 等格式的附件，内' : ''}
                >
                    {/* 只是为了校验 */}
                    {getFieldDecorator('recruitTalentBackgroundSalary.salaryProveRelationsFileList', {
                        rules: [
                            // {
                            //     validator(rule, value, callback) {
                            //         if (value && !value.length) {
                            //             callback('薪资证明不能为空');
                            //             return;
                            //         }
                            //         callback();
                            //     }
                            // }
                        ]
                    })(
                        <UploadOssCompact
                            rules={[{ max: 10 }, { type: ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'rar'] }]}
                            editable={isEdit}
                            onResourceChange={resource => {
                                if (!resource) return;
                                form.setFieldsValue({
                                    'recruitTalentBackgroundSalary.salaryProveRelations': [resource] // = =
                                });
                            }}
                            ossType="private"
                            categoryCode="talentSalaryProveFile"
                        />
                    )}
                </Form.Item>
                <Form.Item style={{ display: 'none' }}>
                    {getFieldDecorator('recruitTalentBackgroundSalary.salaryProveRelations')(<Input />)}
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item label="期望年薪">
                    {renderItem(
                        getFieldDecorator('recruitTalentBackgroundSalary.expectSalary', {
                            initialValue: talentInfo?.recruitTalentBackgroundSalary?.expectSalary,
                            rules: [
                                {
                                    required: !isSecond,
                                    message: '期望年薪不能为空'
                                }
                            ]
                        })(
                            <InputNumber
                                formatter={val => SalaryYearInput(val, true)}
                                parser={val => SalaryYearInput(val)}
                                min={0}
                                style={{ width: '100%' }}
                            />
                        ),
                        formatToThreePart(talentInfo?.recruitTalentBackgroundSalary?.expectSalary),
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item label="期望月薪">
                    {renderItem(
                        <InlineInputWrap>
                            <Form.Item style={{ flex: 1 }}>
                                {getFieldDecorator('recruitTalentBackgroundSalary.expectMonthSalary', {
                                    initialValue: getCurrentExpectMonthSalary()
                                })(
                                    <InputNumber
                                        style={{ width: '100%' }}
                                        // formatter={formatToThreePart}
                                        formatter={val => SalaryMonthInput(val, true)}
                                        parser={val => SalaryMonthInput(val)}
                                        disabled
                                        placeholder="自动生成"
                                    />
                                )}
                            </Form.Item>
                            <span style={{ padding: '0 14px' }}>X</span>
                            <Form.Item>
                                {getFieldDecorator('recruitTalentBackgroundSalary.expectMonthNumber', {
                                    initialValue: talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber || 16,
                                    rules: [
                                        {
                                            required: true,
                                            message: '月份不能为空'
                                        }
                                    ]
                                })(<InputNumber style={{ width: 140 }} min={12} />)}
                            </Form.Item>
                            <span style={{ paddingLeft: 14 }}>月</span>
                        </InlineInputWrap>,
                        <>
                            {formatToThreePart(
                                talentInfo?.recruitTalentBackgroundSalary?.expectSalary /
                                    talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber
                            ) || ''}
                            <span style={{ padding: '0 7px' }}>X</span>
                            {talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber ?? ''}月
                        </>,
                        isEdit
                    )}
                </Form.Item>
            </Col>
        </Row>
    );
}
